<template>
	<view class="page" :style="'background-image: url('+indexBg+');'">
    <u-navbar :fixed="false" title="合同模板" placeholder bgColor="transparent"></u-navbar>
    <view class="search-box">
      <u-search v-model="searchVal" searchIconColor="#3ec1ba" :inputStyle="{borderRadius: '16rpx'}" shape="square"
        bgColor="#fff" height="76rpx" placeholder="请输入" :showAction="false" @search="search" @clear="search" />
    </view>
    <view class="tabs-type">
      <view class="tabs-type-item" :class="{active: queryType=='平台模板'}" @click="queryType='平台模板';">平台模板</view>
      <view class="tabs-type-item" :class="{active: queryType=='公司模板'}" @click="queryType='公司模板';">公司模板</view>
    </view>
    <view class="list">
      <view class="list-item" v-for="item in templateList" :key="item.id">
        <view class="info">
          <image v-if="queryType=='平台模板'" src="https://gowork365.com/prod-api/profile/mini/company/contract1.png" />
          <image v-if="queryType=='公司模板'" src="https://gowork365.com/prod-api/profile/mini/company/contract2.png" />
          <view class="u-flex-1">
            <view class="name u-line-2">{{ item.templateName }}</view>
            <view class="time">{{ item.createTime }}</view>
          </view>
        </view>
        <view class="actions">
          <view class="actions-item" style="background: #E9F8F6;color: #138E88;" @click="handleForm(item)">
            <image src="https://gowork365.com/prod-api/profile/mini/company/action3.png" />
            <text>查看</text>
          </view>
        </view>
      </view>
    </view>
    <view v-if="templateList.length == 0" class="a-empty"><a-empty></a-empty></view>
    <!-- <view v-if="queryType=='平台模板'" class="footer-primary-btn" @click="jumpDZQ">进入平台模板</view> -->
    <!-- <view class="footer-primary-btn" @click="jumpDZQ">上传合同模板</view> -->
	</view>
</template>

<script>
import { listGsTemplate, listPtTemplateList, addTemplate, delTemplate, getTemplateUrl } from '@/api/index'
import { downloadFile, uploadFile, jumpDZQ, formatTime } from '@/common/util'

export default {
  data() {
    return {
      jumpDZQ,
      indexBg: 'https://gowork365.com/prod-api/profile/mini/index/indexBg1.png',
      searchVal: '',
      queryType: '平台模板',
      total: 0,
      page: {
        pageNum: 1,
        pageSize: 50,
      },
      templateList: [],
    }
  },
  watch: {
    queryType() {
      this.search()
    },
  },
  onShow() {
    this.search()
  },
  methods: {
    handleForm(row) {
      getTemplateUrl({ contractUrl: row.id }).then(response => {
        const previewUrl = response.data.templates[0].previewUrl
        uni.setStorageSync('url', previewUrl)
        this.jumpTo('/pages/webView/webView')
      })
    },
    handleDown(row) {
      const url = this.baseUrl + row.contractUrl
      downloadFile(url)
    },
    /** 查询合同模板管理列表 */
    getList() {
      uni.showLoading({ mask: true })
      if(this.queryType == '公司模板') {
        // listGsTemplate({...this.page, templateName: this.searchVal, templateType: '公司治理',}).then(response => {
        //   uni.hideLoading()
        //   this.templateList = [...this.templateList, ...response.rows];
        //   this.total = response.total;
        // });
        listPtTemplateList({
          templateName: this.searchVal,
          userFlowTypeId: this.baseAppId=='wxa023b292fd19d41d'?'yDtIXUU2wpcvwnUEEZEXmENIIWRT6JqV':'yDtBSUUckpxyb0ppUkNgc6Sqg3829xYw',
          systemType: '公司'
        }).then(response => {
          uni.hideLoading()
          this.templateList = response.data;
          this.templateList.forEach(t => {
            t.id = t.templateId
            t.remark = t.description
            t.createTime = formatTime(t.createdOn*1000)
          })
          this.total = response.data.totalCount;
        });
      } else {
        listPtTemplateList({
          templateName: this.searchVal,
          userFlowTypeId: this.baseAppId=='wxa023b292fd19d41d'?'yDtIXUU2wpcvwnUEEZEXmENIIWRT6JqV':'yDtBSUUckpxyb0ppUkNgc6Sqg3829xYw',
          systemType: '平台'
        }).then(response => {
          uni.hideLoading()
          this.templateList = response.data;
          this.templateList.forEach(t => {
            t.id = t.templateId
            t.remark = t.description
            t.createTime = formatTime(t.createdOn*1000)
          })
          this.total = response.data.totalCount;
        });
      }
    },
    search() {
      this.page.pageNum = 1
      this.templateList = []
      this.getList()
    },
    async uploadTemplate() {
      const file = await uploadFile()
      if(file.code != 200) {
        return
      }
      const fileUrl = file.fileName
      const fileName = file.newFileName
      const params = {
        templateUrl: fileUrl,
        templateName: fileName,
        templateType: '公司治理'
      }
      addTemplate(params).then(response => {
        uni.showToast({
          icon: 'none',
          title: '新增成功',
        })
        this.search();
      });
    },
    handleDelete(id) {
      const that = this
      uni.showModal({
        title: '提示',
        content: '删除后不可恢复，是否确认删除？',
        success: async function (res) {
          if (res.confirm) {
            await delTemplate(id)
            uni.showToast({
              icon: 'none',
              title: '删除成功',
            })
            that.search();
          }
        }
      });
    },
  },
  onReachBottom() {
    if(this.page.pageNum * this.page.pageSize < this.total) {
      this.page.pageNum++
      this.getList()
    }
  },
}
</script>

<style lang="scss" scoped>
.page{
	width: 750rpx;
	min-height: 100vh;
  background: #F4F7F6;
  position: relative;
  background-repeat: no-repeat;
  background-size: 750rpx 348rpx;
  padding-bottom: 180rpx;
  .search-box {
    width: 686rpx;
    margin: 48rpx auto 82rpx;
    display: flex;
    align-items: center;
    gap: 36rpx;
  }
  .tabs-type {
    width: 686rpx;
    margin: 0 auto 32rpx;
    display: flex;
    gap: 32rpx;
    .tabs-type-item {
      width: 196rpx;
      height: 76rpx;
      line-height: 76rpx;
      text-align: center;
      background: #FFFFFF;
      border-radius: 38rpx;
      font-family: PingFangSC, PingFang SC;
      font-size: 24rpx;
      color: #138E88;
      border: 2rpx solid #fff;
    }
    .active {
      background: #E9F8F6;
      border: 2rpx solid #138E88;
    }
  }
  .list {
    width: 686rpx;
    margin: 0 auto;
    .list-item {
      margin-bottom: 32rpx;
      width: 686rpx;
      background: #FFFFFF;
      box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(11,102,97,0.2);
      border-radius: 16rpx;
      padding: 48rpx 32rpx 40rpx;
      .info {
        display: flex;
        gap: 24rpx;
        height: 138rpx;
        margin-bottom: 48rpx;
        image {
          width: 104rpx;
          height: 104rpx;
          flex-shrink: 0;
        }
        .name {
          font-size: 28rpx;
          color: rgba(0,0,0,0.85);
          margin-bottom: 16rpx;
        }
        .time {
          font-size: 24rpx;
          color: rgba(0,0,0,0.25);
        }
      }
      .actions {
        display: flex;
        gap: 24rpx;
        .actions-item {
          flex: 1;
          height: 76rpx;
          border-radius: 8rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 4rpx;
          font-family: PingFangSC, PingFang SC;
          font-size: 24rpx;
          image {
            width: 32rpx;
            height: 32rpx;
          }
        }
      }
    }
  }
}
</style>
